<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!--
    页面上创建随机个div
    - 个数随机
    - 字符随机
    - 位置随机（屏幕内部）
    - 速度、运动方向随机
    - 每隔时间间隔移动一小段距离
    - 碰到屏幕边缘可以反弹
    - 其中有一个div是静止
    - 点div，如果div是不动的这个元素，游戏胜利，
        告诉玩家花了多少时间
    - 点其他div，失败3次，game over
    - 重新开始游戏
-->
    <div id="container" class="scene">
        <div id="info">

        </div>
    </div>
    <div id="start" class="scene">
        <button id="easyBtn">简单</button>
        <button id="hardBtn">困难</button>

    </div>
    <div id="won" class="scene">
        恭喜你，找到了：
        <span id="find">
        </span>！
        用时<span id="time"></span>秒。
        <button class="back">返回</button>
        <h2 id="levelText">简单难度</h2>
        <ul id="records">

        </ul>
    </div>
    <div id="gameOver" class="scene">
        Game Over <button class="back">返回</button>
    </div>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            overflow: hidden;
        }

        .scene {
            width: 100vw;
            /* v-view port视口 */
            height: 100vh;
            display: none;
        }

        #info {
            text-align: right;
            font-size: 2em;
        }

        #start {
            background-color: coral;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .item {
            position: absolute;
            pointer-events: none;
        }
    </style>
    <script src="./game.js"></script>

</body>

</html>